<!--Fault rules 故障规则-->
<template>
  <div class="fault-rule-box">
    <!--标题-->
    <div class="header">新增策略配置</div>
    <div class="fault-container">
      <!--锚点菜单-->
      <div class="point-menu">
        <ul>
          <li
            v-for="pointItem in pointList"
            :key="pointItem.id"
            :class="{ active: pointItem.id == activePointId }"
            @click="scrollToSection(pointItem)"
          >
            {{ pointItem.label }}
          </li>
        </ul>
      </div>
      <!--锚点内容-->
      <div class="main-container">
        <!--策略信息-->
        <div class="policy-msg sction-box" id="sction0">
          <div class="section-title">策略信息</div>
          <div class="policy-msg-content">内容</div>
        </div>
        <!--分析规则-->
        <div class="analysis-rules sction-box" id="sction1">
          <div class="section-title">分析规则</div>
          <div class="analysis-rules-content">
            <div class="analysis-form">
              <el-form :inline="true" :model="analysisForm">
                <el-form-item label="故障分析范围:">
                  <div class="form-mixin">
                    <span>线路前后</span>
                    <el-input
                      v-model="analysisForm.lineDistance"
                      style="width: 50px; margin: 0 3px"
                      size="small"
                      placeholder="请输入"
                    ></el-input>
                    <el-input
                      style="width: 50px; margin-right: 3px"
                      size="small"
                      v-model="analysisForm.towerDistance"
                      placeholder="请输入"
                    ></el-input>
                    <span>杆塔</span>
                  </div>
                </el-form-item>
                <el-form-item label="故障二次分析:">
                  <div class="form-mixin">
                    <span>线路前后</span>
                    <el-input
                      v-model="analysisForm.faultTime"
                      style="width: 50px; margin: 0 3px"
                      size="small"
                      placeholder="请输入"
                    ></el-input>
                    <span>分钟</span>
                  </div>
                </el-form-item>
              </el-form>
            </div>
            <!--中间内容-->
            <div class="analysis-content">
              <div class="analysis-nav">
                <ul v-for="(mainItem, mainIdx) in analysisNav" :key="mainIdx">
                  <!--主标题-->
                  <li>
                    <span>{{ mainItem.mainTitle }}</span>
                    <i class="el-icon-arrow-right"></i>
                  </li>
                  
                    <!--导航-->
                    <li
                      class="drag-handle"
                      v-for="(navItem, navIdx) in mainItem.children"
                      :key="'nav-' + navIdx"
                    >
                      <i class="el-icon-arrow-right"></i>
                      <span>{{ navItem.title }}</span>
                    </li>
                  
                </ul>
              </div>
              <div class="analysis-right"></div>
            </div>
          </div>
        </div>
        <!--触发效果-->
        <div class="policy-msg sction-box" id="sction2">
          <div class="section-title">触发效果</div>
          <div class="policy-msg-content">内容</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "sd",
  components: {
    
  },
  mounted() {
    const container = document.querySelector(".main-container");
    container.addEventListener("scroll", this.handleScroll);
  },
  data() {
    return {
      ismuneScoll: false,
      scrollTimeOut: null,
      // 当前选中的锚点
      activePointId: "sction0",
      pointList: [
        {
          label: "策略信息",
          id: "sction0",
        },
        {
          label: "分析规则",
          id: "sction1",
        },
        {
          label: "触发效果",
          id: "sction2",
        },
      ],
      // 分析规则
      analysisForm: {
        lineDistance: "",
        towerDistance: "",
        faultTime: "",
      },
      // 分析规则的导航
      analysisNav: [
        {
          mainTitle: "故障分析原因",
          children: [
            {
              title: "雷击",
            },
            {
              title: "飘挂物",
            },
            {
              title: "外力破坏",
            },
            {
              title: "地灾",
            },
            {
              title: "绝缘劣化",
            },
            {
              title: "涉鸟",
            },
            {
              title: "覆冰",
            },
            {
              title: "树障",
            },
            {
              title: "风偏",
            },
            {
              title: "污闪",
            },
            {
              title: "山火",
            },
          ],
        },
      ],
    };
  },
  methods: {
    scrollToSection(item) {
      this.ismuneScoll = true;
      this.activePointId = item.id;
      const element = document.getElementById(this.activePointId);
      if (element) {
        element.scrollIntoView({
          behavior: "smooth",
          block: "start",
        });
      }
      clearTimeout(this.scrollTimeOut);
      this.scrollTimeOut = setTimeout(() => {
        this.ismuneScoll = false;
      }, 500);
    },
    handleScroll() {
      if (this.ismuneScoll) return;

      const sections = document.querySelectorAll(".sction-box");
      sections.forEach((section, index) => {
        const rect = section.getBoundingClientRect();
        if (rect.top <= 100 && rect.bottom >= 100) {
          this.activePointId = `sction${index}`;
        }
      });
    },
    onDragEnd(){
        console.log(this.analysisNav,"analysisNavanalysisNav    ")
    }
  },
};
</script>

<style lang="scss" scoped>
.section-title {
  position: relative;
  width: 100%;
  background: #d8ebf9;
  border-radius: 3px;
  font-weight: bold;
  padding: 5px 25px;
  &::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5382f9;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.fault-rule-box {
  width: 100%;
  height: 100%;
  padding: 10px;
  .header {
    font-size: 16px;
    font-weight: bold;
  }
  .fault-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: calc(100% - 30px);
    margin-top: 10px;
    .point-menu {
      width: 100px;
      > ul {
        width: 100%;
        > li {
          position: relative;
          padding: 5px 15px;
          transition: all 0.3s;
          cursor: pointer;
          &::before {
            content: "";
            position: absolute;
            background: #ddd;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
          &:not(:last-child)::after {
            content: "";
            position: absolute;
            background: #ddd;
            width: 1px;
            height: 33px;
            left: 4px;
            bottom: -15px;
            transform: translateX(-50%);
          }
        }
        > .active {
          &::before {
            content: "";
            position: absolute;
            background: #5382f9;
            z-index: 2;
          }
        }
      }
    }
    .main-container {
      width: calc(100% - 110px);
      height: 100%;
      overflow-y: auto;
      .policy-msg {
        width: 100%;
        .policy-msg-content {
          width: 100%;
        }
      }

      .analysis-rules {
        width: 100%;
        .analysis-rules-content {
          width: 100%;
          .analysis-form {
            width: 100%;
          }
          .analysis-content {
            width: 100%;
            border: 1px solid #ddd;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            .analysis-nav {
              width: 150px;
              padding: 5px;
              border-right: 1px solid #ddd;
              > ul {
                > li {
                  padding-left: 10px;
                  &:first-child {
                    padding: 0;
                    > span {
                      font-weight: bold;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>